<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>全选和反选</title>
</head>
<script>
    function checkAll(obj) {
        let flag = obj.checked;
        let goodsArr = document.getElementsByName("item");
        for (let i = 0; i < goodsArr.length; i++){
            goodsArr[i].checked = flag;
        }
    }
    function reverseSelect() {
        let goodsArr = document.getElementsByName("item");
        for (let i = 0; i < goodsArr.length; i++){
            goodsArr[i].checked = !goodsArr[i].checked;
        }
        checkAllStatus();
    }
    function checkAllStatus() {
        let truecount = 0;
        let itemArr = document.getElementsByName("item");
        for (let i = 0; i < itemArr.length; i++){
            if (itemArr[i].checked==true){
                truecount++;
            }
        }
        if (truecount==5){
            document.getElementById("all").checked = true;
        }else {
            document.getElementById("all").checked = false;
        }
    }
</script>
<body>
<form>
    <h3>商品价格列表</h3>
    <input type="checkbox" name="item" value="1500" onclick="checkAllStatus()"/> 山地自行车1500<br />
    <input type="checkbox" name="item" value="200"  onclick="checkAllStatus()"/> 时尚女装200<br />
    <input type="checkbox" name="item" value="3000"  onclick="checkAllStatus()"/> 笔记本电脑3000元<br />
    <input type="checkbox" name="item" value="800"  onclick="checkAllStatus()"/> 情侣手表800<br />
    <input type="checkbox" name="item" value="2000"  onclick="checkAllStatus()"/> 桑塔纳2000<br />
    <hr/>
    <!-- TODO:1.确定事件 给"全选/全不选"复选框绑定单击事件
        this: 写在哪个标签上就代表那个标签对象
    -->
    <input type="checkbox" id="all" onclick="checkAll(this)" />全选/全不选 &nbsp;
    <input type="button" id="reverse" onclick="reverseSelect()"  value=" 反 选 "/>&nbsp;
</form>
</body>
</html>